<!--页面 -->
<template>
	<div class="contact marginAuto">
		<div class="timeress marginAuto">
			<div class="time">Hangup Time：<span v-text=""></span>{{ formdata.usertimestart }}-{{ formdata.usertimeend }}</div>
			<div class="address">Ip Address：{{ formdata.usermsg.ip }}</div>
		</div>
		<div class="data marginAuto">
			<div class="data-revebue">
				<div class="data-revebue-each">
					<div class="data-each-title">Total Revenue</div>
					<div class="data-each-num">{{ formdata.withdrawalRulesdata.user_money }}</div>
				</div>
				<div class="data-revebue-each">
					<div class="data-each-title">Totday Revenue</div>
					<div class="data-each-num">{{ formdata.withdrawalRulesdata.today_money }}</div>
				</div>
			</div>
			<div class="data-time">
				Expiration Time：{{ formdata.usermsg.end_time }}
			</div>
		</div>
		<div class="list">
			<el-table :data="formdata.withmsg" style="width:100%">
			      <el-table-column
			        prop="address"
			        label="User Name" 
			        width="110"
					align="center"
					style="border:none;">
			      </el-table-column>
			      <el-table-column
			        prop="amount"
			        label="Usdt"
			        width="100"
					align="center">
			      </el-table-column>
			      <el-table-column
			        prop="create_time"
			        label="Creation Time"
					width="130"
					align="center">
			      </el-table-column>
				  <el-table-column
				    prop="statustxt"
				    label="Status"
					width="86"
					align="center">
				  </el-table-column>
			</el-table>
		</div>
		<div class="from">
			<div class="from-eachinput">
				<el-input style="height:50px;" v-model="formdata.address"
					placeholder="Plese Input Ouyi Email："></el-input>
			</div>
			<div class="from-eachinput">
				<el-input style="height:50px;" type="text" v-model="formdata.amount"
					placeholder="Minimum Withdrawal 10$:">
				</el-input>
				<div class="inputhsize">{{ formdata.withmoney }}</div>
			</div>
		</div>
		<div class="btneach" style="margin-top:55px;">
			<el-button class="btneachbtn mainbg" type="primary" @click="withdrawafun">Begin</el-button>
		</div>
		<div class="btneach">
			<el-button class="btneachbtn" style="background-color:#D4D4D4;">Withdrawal Up To 3 Times Per Day</el-button>
		</div>
	</div>
</template>

<script setup>
	import { onMounted } from 'vue';
	import {
		loginmodel,homemodel
	} from '@/api/services/api'
	import {
		ElMessage,
		ElLoading,
		ElNotification
	} from 'element-plus'
	const store = useStore();
	const router = useRouter();
	let LoadingInstance = null;
	const formdata = reactive({
		address: '',
		amount: '',
		usermsg:{},
		usertimestart:'',
		usertimeend:'',
		withdrawalRulesdata:{},
		mineListdata:[],
		withmoney:0,
		withmsg:[]
	});
	const withdrawafun = async () => { // 提现
		let sendData = {
			address:formdata.address,
			amount:formdata.amount 
		};
		if (formdata.address == '' || formdata.amount == '') {
			ElNotification({
				message: 'Input error',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		
		if(Number(formdata.amount) > Number(formdata.withmoney)){
			ElNotification({
				message: 'The withdrawal amount is wrong',
				showClose: false,
				icon: 'Platform',
				customClass: 'notion_customClass',
				duration: 1000
			})
			return false
		};
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		await homemodel.withdrawalapi(sendData).then((res) => {
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.address = ''
				formdata.amount = '';
				mineListfun();
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
		// 
	};
	const mineListfun = async ()=>{  // 提现列表
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		homemodel.mineListapi().then((res) => {
			LoadingInstance.close()
			if (res.code == 1) {
				res.data.list.forEach((item)=>{
					item.create_time = item.create_time.substr(0,10);
					if(item.status == 0){
						item.statustxt = 'waiting'
					}else if(item.status == 1){
						item.statustxt = 'success'
					}if(item.status == 2){
						item.statustxt = 'failed'
					}
				})
				formdata.withmsg = res.data.list;
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	const withdrawalfun = async ()=>{  // 提现规则
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		homemodel.withdrawalRulesapi().then((res) => {
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.withdrawalRulesdata = res.data;
				formdata.withmoney = parseFloat(res.data.user_money*res.data.proportion).toFixed(2);
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	const userfun = async ()=>{ // 用户信息
		LoadingInstance = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		homemodel.userinfoapi().then((res) => {
			LoadingInstance.close()
			if (res.code == 1) {
				formdata.usermsg = res.data;
				formdata.usertimestart = res.data.effective_time[0];
				formdata.usertimeend = res.data.effective_time[1];
			} else {
				ElNotification({
					message: res.msg,
					showClose: false,
					icon: 'Platform',
					customClass: 'notion_customClass',
					duration: 1000
				})
			}
		}).catch((err) => {
			LoadingInstance.close()
		})
	};
	onMounted(()=>{
		let token = Boolean(localStorage.getItem('token'));
		if(!token){
			return false
		};
		userfun();
		withdrawalfun();
		mineListfun()
	})
</script>

<style scoped lang="less">
	.contact{
		max-width: 1020px;
		padding-top:40px;
		padding-bottom: 150px;
	}
	// 
	.timeress{
		padding: 20px 0;
		width: 90%;
	}
	.time,.address{
		font-size: 20px;
		color: #333333;
		font-weight:700;
		line-height:30px;
	}
	// 
	.data{
		background-color: #fff;
		border-radius: 10px;
		width:90%;
		min-width:450px;
		.data-revebue{
			display: flex;
			justify-content: space-around;
			.data-revebue-each{
				width: 38%;
				padding:30px 0;
				.data-each-title{
					font-size: 14px;
					color:#666666;
					line-height: 20px;
				}
				.data-each-num{
					font-size: 30px;
					line-height: 40px;
					margin-top: 15px;
					font-weight: 700;
				}
			}
		}
		.data-time{
			width: 100%;
			height:46px;
			line-height: 46px;
			background-color:#2F75FF;
			padding-left:40px;
			color: #fff;
			font-size: 14px;
			border-bottom-left-radius:10px;
			border-bottom-right-radius:10px;
		}
	}
	// 
	.list{
		width: 90%;
		margin:auto;
		padding: 17px 0;
		.table{
			width:450px;
			padding:17px 2%;
			background-color: #fff;
			border-radius: 10px;
		}
		
	}
	// 
	.from-eachinput{
		position: relative;
		width: 90%;
		margin: 10px auto;
		.inputhsize{
			width:60px;
			height:40px;
			line-height:40px;
			position:absolute;right:5px;top:5px;
			background-color:#fff;
			text-align: right;
			font-size: 16px;
			color: #666666;
		}
	}
	.btneach {
		width: 290px;
		margin: auto;
		margin-bottom: 23px;
	
		.btneachbtn {
			width: 290px;
			height: 45px;
			border: none;
		}
	}
</style>
<style>
	.cell{
		font-weight: normal !important;
	}
	.el-table {
		--el-table-border:none !important;
	}
</style>